<template>
  <el-menu router background-color="#cd853f"
    text-color="#fff" active-text-color="#ffd04b"
    default-active="/page" :collapse="isCollapse"
    :collapse-transition='false'>
        <el-menu-item @click="isCollapse = !isCollapse" class="menu-itm" v-if="!isCollapse" title="收起侧边栏">
        <i class="el-icon-d-arrow-left"></i>
      </el-menu-item>
        <el-menu-item @click="isCollapse = !isCollapse" class="menu-itm" v-else title="展开侧边栏">
        <i class="el-icon-d-arrow-right" ></i>
      </el-menu-item>
      <el-menu-item index="/page/card">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/page/group">
        <i class="el-icon-s-promotion"></i>
        <span slot="title">柚子小组</span>
      </el-menu-item>
      <el-menu-item style="padding-left:20px" index="/page/book">
           <i class="el-icon-s-management"></i>
            <span slot="title">柚子抽屉</span>
       </el-menu-item>
      <el-menu-item style="padding-left:20px" index="/page/time">
           <i class="el-icon-upload"></i>
          <span slot="title">小柚时光</span>
      </el-menu-item>
     <el-menu-item  style="padding-left:20px" index="/page/plans">
         <i class="el-icon-s-flag"></i>
             <span slot="title">小柚计划</span>
      </el-menu-item>
      <el-menu-item index="/page/createClock">
        <i class="el-icon-s-claim"></i>
        <span slot="title">柚子打卡</span>
      </el-menu-item>
       <el-menu-item index="/page/mine/passphone">
        <i class="el-icon-user-solid"></i>
        <span slot="title">个人中心</span>
      </el-menu-item>
      <el-menu-item index="/page/message/sign">
        <i class="el-icon-message-solid"></i>
        <span slot="title">消息中心</span>
      </el-menu-item>
       <el-menu-item index="/page/statement/productintro">
        <i class="el-icon-info"></i>
        <span slot="title">关于我们</span>
      </el-menu-item>
    </el-menu>
</template>

<script>
export default {
  name: 'layout',
  components: {},
  props: ['is-collapse'],
  data () {
    return {
      isCollapse: false, // 侧边栏的展示状态
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
i{
  color: #f5deb3;
}
.menu-itm{
  text-align: center;
}
span{
  color: #f5deb3;
}
.nav{
  font-size: 20px;
}
.el-menu{
  border-right: 0;
}
</style>
